<template>
    <div class="qa">
        <h4>{{ order ? order + ". " + titles : titles }}</h4>
        <p v-for="(item,key) in options">
            <button :value="alpha[key]" :key="key" @click="verify">
                {{ alpha[key] + ". " + item }}
            </button>
        </p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            alpha: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        }
    },
    props: {
        titles: String,
        options: Array,
        order: {
            type: String,
            default: ''
        },
        answer: String
    },
    methods: {
        verify(e){
            if(e.target.value === this.answer){
                e.target.className = 'yes';
            }else{
                e.target.className = 'no';
            }
        }
    }
}
</script>

<style>
    .qa > p > button{
        background: #ccc;
        border: none;
        padding: 10px;
        border-radius: 5px;
    }
    .yes{
        background: rgb(97, 189, 112) !important;
    }
    .no{
        background: rgb(241, 92, 92) !important;
    }
</style>